<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美滋滋饮品公司管理系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="./css/x-admin.css" media="all">
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a><cite>首页</cite></a> <a><cite>会员管理</cite></a>
			<a><cite>分类管理</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<xblock>
		<button class="layui-btn layui-btn-danger" onclick="delAll()">
			<i class="layui-icon">&#xe640;</i>批量删除
		</button>
		<button class="layui-btn"
			onclick="admin_add('添加用户','designer-add.html','600','500')">
			<i class="layui-icon">&#xe608;</i>添加
		</button>
		<span class="x-right" style="line-height: 40px">共有数据：88 条</span></xblock>
		<table class="layui-table">
			<thead>
				<tr>
					<th><input onclick="selAll(this)" type="checkbox" name="" value=""></th>
					<th>ID</th>
					<th>排序</th>
					<th>设计师名</th>
					<th>肖像</th>
					<th>职务名称</th>
					<th>手机号码</th>
					<th>邮箱</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="table_designer">

			</tbody>
		</table>
		<div id="pager"></div>
	</div>
	<script src="./lib/layui/layui.js" charset="utf-8"></script>
	<script src="./js/x-layui.js" charset="utf-8"></script>
	<script>
		var $ = null;
		var layer = null;
		var laypage = null;

		layui.use([ 'laypage', 'element', 'layer' ],function() {
			$ = layui.jquery; // jquery
			layer = layui.layer; // 弹出层
			laypage = layui.laypage; // 分页

			// jquery单位页面加载事件,也就是说当页面加载完毕之后自动触发其中的内容
			$(function () {
				myPager();
			});
		
		})
		
		function myPager() {
			$.post("../adminDesigner?reqName=getAllDesigners",{},function(res){ // res是服务器返回的数据,注意事项字符串的类型
				laypage.render({
					elem: 'pager' , // 注意，这里的 test1 是 ID，不用加 # 号
					count: parseInt(res) , // 数据总数，从服务端得到
					limit: 2 , // 每页分2条数据
					jump: function(obj, first){ // 点击分页条时触发
					    // obj包含了当前分页的所有参数，比如：
					    console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
					    console.log(obj.limit); // 得到每页显示的条数
					   	
					    selDesigneries(obj.curr, obj.limit);
					  }
				});
			},"json");
			
		}
		
		function selDesigneries(page, size) {
			$("#table_designer").html("");//每次调用方法前清空一下表格
			// 相对路径,就是相对于自身位置的路径
			// ../可以代表返回上一级
			$.post("../adminDesigner?reqName=getDesigners",{
				page: page,
				size: size
			},function(res){ // res是服务器返回的数据
				for (var i=0;i<res.length;i++) { // 遍历数组
					// 向id为table_designer的tobody中添加tr
					// ``是模板字符串,好处是在中间不需要考虑单引号和双引号冲突的问题
					$("#table_designer").append(`
							<tr>
							<td><input type="checkbox" value="1" name=""></td>
							<td>${res[i].designerid}</td>
							<td>${i+1}</td>
							<td>${res[i].designername}</td>
							<td><img src="../${res[i].headportrait}" /></td>
							<td>${res[i].title}</td>
							<td>${res[i].phone}</td>
							<td>${res[i].email}</td>
							<td class="td-manage"><a title="编辑" href="javascript:;"
								onclick="cate_edit('编辑','designer_edit.html',${res[i].designerid},'','510')"
								class="ml-5" style="text-decoration: none"> <i
									class="layui-icon">&#xe642;</i>
							</a> <a title="删除" href="javascript:;" onclick="cate_del(this,${res[i].designerid})"
								style="text-decoration: none"> <i class="layui-icon">&#xe640;</i>
							</a></td>
						</tr>
					`);
				}
			},"json"); // 将res转化为json对象
		}
		//设置全选全不选
        function selAll(obj){
      	  var checked=$(obj).prop("checked");//得到表头中的复选框是否被选中
      	  $("#table_designer input:checkbox").prop("checked",checked);
         }
      //批量删除提交
        function delAll () {
       	var chks=$("#table_designer input:checkbox:checked");//获得所有被选中的复选框 产生的是个数组
           if (chks.length==0) {
				alert("勾选有效的复选框");
				return false;
			}
       	layer.confirm('确认要删除吗？',function(index){
       		var ids=[];
       		for (var i = 0; i < chks.length; i++) {
					var abc=$(chks[i]).parent().next().html();
					ids.push(abc);
				}
       		$.post("../adminDesigner?reqName=delDesignersByid",{
       			ids: ids.join(",")//将数组变成字符串
       		},function(res){
       			if (res.success) {
       				 //捉到所有被选中的，发异步进行删除
                       layer.msg('删除成功', {icon: 1});
                       myPager();
					} else {
						//捉到所有被选中的，发异步进行删除
	                    layer.msg('删除失败', {icon: 1});
					}
       		},"json");
               
           });
        }

		//-编辑
		function cate_edit(title, url, id, w, h) {
			
			sessionStorage.setItem("designerid",id);//把id存到浏览器会话中
			x_admin_show(title, url, w, h);
		}
		/*添加*/
        function admin_add(title,url,w,h){
            x_admin_show(title,url,w,h);
        }
		/*-删除*/
		function cate_del(obj, id) {
			layer.confirm('确认要删除吗？', function(index) {
				//发异步删除数据
				$.post("../adminDesigner?reqName=getDes",{
					designerid: id
				},function(res){ // res是服务器返回的数据
					if (res.success) { // 删除成功 
						layer.msg(res.success, {icon:1,time:2000});
						$(obj).parents("tr").remove(); // 删除点击的所在行
						myPager(); // 重新调用查询所有的方法
					} else { // 删除失败
						layer.msg(res.success, {icon:1,time:2000});
					}
				},"json");
			});
		}
	</script>
</body>
</html>